<template>
	<Drawer
		v-model:visible = 'visible'
		:bodyStyle 		= "{padding:'10px'}"
		:destroyOnClose = 'true'
		:width 			= 'width'
		:class 			= "scroll?'jzer-drawer-scroll':'jzer-drawer-fv'"
	>
		<slot></slot>
		<Loading :loading='loading' size='large' />
	</Drawer>
</template>

<script setup>
	import { Drawer } from 'ant-design-vue'
	/* --------------------------- Component --------------------------- */
	const Button  = $.lazy(()=>import('@antd/button.vue'))
	const Loading = $.lazy(()=>import('@antd/loading.vue'))
	/* --------------------------- props --------------------------- */
	const props = defineProps({
		cancelText 	: { type:String, default: '取消' },
		okText 		: { type:String, default: '确定' },
		footer 		: { type:Boolean, default: true },
		scroll 		: { type:Boolean, default: true },
		width 		: { type:String, default: '50%' },
		loading 	: Boolean,
		disabled	: Boolean,
	})
	const  { cancelText, okText, disabled, footer, scroll } = props
	/* --------------------------- data --------------------------- */
	const btnData =  [
		{ label:cancelText, ghost:true, click:()=>onCancel() },
		{ label:okText,  disabled, click:()=>onOk() },
	]
	/* --------------------------- ref --------------------------- */
	let visible = $ref()
	let  btns = $ref(btnData)
	/* --------------------------- method --------------------------- */
	const close = () => visible = false
	/* --------------------------- 通信 --------------------------- */
	defineExpose({
		open : () => visible = true,
		close
	})
</script>